﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>忘记密码</title>

    <link href="~/Lib/Home/register/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Lib/Home/register/css/prettify.css" rel="stylesheet" />
    <link href="~/Lib/Home/register/css/iconfont.css" rel="stylesheet" />
    <link href="~/Common/layUI/theme/layui.css" rel="stylesheet" />
    <style>
        .isPass{
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class='container'>
        <section id="wizard">
            <div class="page-header">
                <h1>忘记密码</h1>
            </div>
            <div id="rootwizard">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul>
                                <li><a href="#tab1" data-toggle="tab"><span class="iconfont icon-1"></span></a></li>
                                <li><a href="#tab2" data-toggle="tab"><span class="iconfont icon-2"></span></a></li>
                                <li><a href="#tab3" data-toggle="tab"><span class="iconfont icon-3"></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="bar" class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">
                        <h2>找回账户信息：</h2>
                        <div class="tep1">

                            <div class="form-group">
                                <label for="name">用户名：</label>
                                &nbsp;&nbsp;<input type="text" class="form-control" id="name" placeholder="用户名"><br />
                            </div>

                            <div class="form-group">
                                <label for="phone">手机号码：</label>
                                &nbsp;&nbsp;<input type="text" class="form-control" id="phone" placeholder="手机号码"><br />

                            </div>

                            <div class="form-group">
                                <label for="yzm">验证码：</label>
                                &nbsp;&nbsp;<input type="text" class="form-control" id="yzm" placeholder="验证码"><br />
                                <button class="btn btn-info" id="mmm">获取验证码</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <h2>新密码</h2>
                        <form>

                            <div class="form-group">
                                <label for="pwd1">新密码：</label>
                                <input type="password" class="form-control" id="pwd1" placeholder="密码">
                            </div>
                            <div class="form-group">
                                <label for="pwd2">确认密码：</label>
                                <input type="password" class="form-control" id="pwd2" placeholder="确认密码">
                            </div>

                        </form>


                    </div>
                    <div class="tab-pane" id="tab3">
                        <div class="success_bg" style="background-image:url(/Lib/Home/register/img/成功.png);">

                        </div>
                        <p>修改成功！</p>
                        <a class="btn btn-group-lg" href="../Home/Login">返回到登录界面</a>
                    </div>

                    <ul class="pager wizard">
                        <li class="previous first" style="display:none;"><a href="#">First</a></li>
                        <li class="previous"><a href="#">上一步</a></li>
                        <li class="next last" style="display:none;"><a href="#">Last</a></li>
                        <li class="next"><a href="#">下一步</a></li>
                    </ul>
                </div>
            </div>
        </section>
    </div>

    <script src="~/Common/jquery-2.1.1.js"></script>
    <script src="~/Common/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Lib/Home/register/js/jquery.bootstrap.wizard.js"></script>
    <script src="~/Lib/Home/register/js/prettify.js"></script>
    <script src="~/Common/layUI/layer.js"></script>

    <script>
        $(function () {

            $("#mmm").click(function () {
                $.ajax({
                    url: "../Home/YZM",
                    data: { "phone": $("#phone").val() },
                    success: function (data) {
                        debugger
                        if (parseInt(data) == 1) {
                            debugger
                            layer.msg("发送成功！", { icon: 1 });
                        }
                        else if (parseInt(data) == 0) {
                            debugger
                            layer.msg("手机号码不能为空！", { icon: 2 });


                        }
                        else if (parseInt(data) == 2) {
                            debugger
                            layer.msg("手机号码不符合规范！", { icon: 2 });

                        }
                        else {
                            debugger
                            layer.msg("发送失败", { icon: 2 });
                        }
                    },
                    error: function () {
                     
                        layer.msg("发送失败hahah！", { icon: 2 });

                    }
                });
            });

        });
    </script>

    <script>
        $(document).ready(function () {
            var i = 0;
            $('#rootwizard').bootstrapWizard({
                'tabClass': 'nav', 'debug': false, onShow: function (tab, navigation, index) {
                    console.log('onShow');
                }, onNext: function (tab, navigation, index) {
                  
                    if ($("#name").val() == "") {
                        layer.msg("用户名不能为空", { icon: 2 });
                        return false;
                    }
                    else if ($("#phone").val() == "") {
                        layer.msg("手机号码不能为空", { icon: 2 });
                        return false;
                    }
                    else if ($("#yzm").val() == "") {
                        layer.msg("验证码不能为空", { icon: 2 });
                        return false;
                    }
                    if (i == 0) {
                        if ($("#name").val() != "" && $("#phone").val() != "" && $("#yzm").val() != "") {
                            $.ajax({
                                url: "../Home/Forget_yzm",
                                data: { "yzm": $("#yzm").val() },
                                success: function (data) {
                                    if (parseInt(data) == 1) {
                                        layer.msg("验证成功", { icon: 1 });
                                        $("#yzm").addClass("isPass");
                                    }
                                    else if (parseInt(data) == 0) {
                                        layer.msg("验证码错误！", { icon: 2 });


                                    }
                                },
                                error: function (data) {
                                    layer.msg("验证码错误！", { icon: 2 });

                                }

                            });

                            if (!$("#yzm").hasClass("isPass")) {
                           
                                return false;
                            }
                            if ($("#yzm").hasClass("isPass")) {
                               
                                $("#yzm").removeClass("isPass");
                            }

                        }
                    }
                    
                    if (i ==1) {
                      
                        if ($("#pwd1").val() == "" || $("#pwd2").val() == "") {
                            layer.msg("密码不能为空！", { icon: 2});
                            return false;
                        }
                        if ($("#pwd1").val() != $("#pwd2").val()) {
                            layer.msg("两次密码不一致！", { icon: 2 });
                            return false;
                        }
                    }

                    if (i == 1) {
                        $.ajax({
                            url: "../Home/Uppwd",
                            data: { "pwd": $("#pwd1").val(), "acc": $("#name").val() },
                            success: function (data) {
                                if (parseInt(data==1)) {
                                    layer.msg("修改成功！", { icon: 1});
                                }
                            },
                            error: function () {

                            }

                        });
                    }

                    i++;
                   
                    console.log('onNext');
                }, onPrevious: function (tab, navigation, index) {
                    i--;
                    console.log('onPrevious');
                }, onLast: function (tab, navigation, index) {
                    console.log('onLast');
                }, onTabClick: function (tab, navigation, index) {
                    console.log('onTabClick');
                    alert('on tab click disabled');
                }, onTabShow: function (tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#rootwizard .progress-bar').css({ width: $percent + '%' });
                }
            });

            $('#pills').bootstrapWizard({
                'tabClass': 'nav nav-pills', 'debug': false, onShow: function (tab, navigation, index) {
                    console.log('onShow');
                }, onNext: function (tab, navigation, index) {
                    console.log('onNext');
                }, onPrevious: function (tab, navigation, index) {
                    console.log('onPrevious');
                }, onLast: function (tab, navigation, index) {
                    console.log('onLast');
                }, onTabClick: function (tab, navigation, index) {
                    console.log('onTabClick');
                    alert('on tab click disabled');
                }, onTabShow: function (tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#pills .progress-bar').css({ width: $percent + '%' });
                }
            });

            $('#tabsleft').bootstrapWizard({
                'tabClass': 'nav nav-tabs', 'debug': false, onShow: function (tab, navigation, index) {
                    console.log('onShow');
                }, onNext: function (tab, navigation, index) {
                    console.log('onNext');
                }, onPrevious: function (tab, navigation, index) {
                    console.log('onPrevious');
                }, onLast: function (tab, navigation, index) {
                    console.log('onLast');
                }, onTabClick: function (tab, navigation, index) {
                    console.log('onTabClick');

                }, onTabShow: function (tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#tabsleft .progress-bar').css({ width: $percent + '%' });

                    // If it's the last tab then hide the last button and show the finish instead
                    if ($current >= $total) {
                        $('#tabsleft').find('.pager .next').hide();
                        $('#tabsleft').find('.pager .finish').show();
                        $('#tabsleft').find('.pager .finish').removeClass('disabled');
                    } else {
                        $('#tabsleft').find('.pager .next').show();
                        $('#tabsleft').find('.pager .finish').hide();
                    }

                }
            });

            $('#inverse').bootstrapWizard({
                'tabClass': 'nav', 'debug': false, onShow: function (tab, navigation, index) {
                    console.log('onShow');
                }, onNext: function (tab, navigation, index) {
                    console.log('onNext');
                    if (index == 2) {
                        // Make sure we entered the name
                        if (!$('#name').val()) {
                            alert('You must enter your name');
                            $('#name').focus();
                            return false;
                        }
                    }

                    // Set the name for the next tab
                    $('#inverse-tab3').html('Hello, ' + $('#name').val());

                }, onPrevious: function (tab, navigation, index) {
                    console.log('onPrevious');
                }, onLast: function (tab, navigation, index) {
                    console.log('onLast');
                }, onTabClick: function (tab, navigation, index) {
                    console.log('onTabClick');
                    alert('on tab click disabled');
                    return false;
                }, onTabShow: function (tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#inverse .progress-bar').css({ width: $percent + '%' });
                }
            });
            $('#tabsleft .finish').click(function () {
                alert('Finished!, Starting over!');
                $('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
            });

        });
   </script>
</body>
</html>
